<template>
	<div class="box">
		<div id="" class="flex">
			<el-button @click="add(0.1)">1000数据图</el-button>
			<el-button @click="add(0.5)">5000数据图</el-button>
			<el-button @click="add(1)">1W数据图</el-button>
			<el-button @click="add(10)">10W数据图</el-button>
			<el-button @click="add(20)">20W数据图</el-button>
			<el-button @click="add(50)">50W数据图</el-button>
			<el-button @click="add(100)">100W数据图</el-button>
			<el-button @click="add(500)">500W数据图</el-button>
			<el-button @click="add(1000)">1000W数据图</el-button>
			<el-button @click="nodata">清空</el-button>
		</div>
		<div id="fromBox"></div>
	</div>
</template>

<script>
import $ from 'jquery';
export default {
	name: 'bigData',
	data() {
		return {
			num: 0
		};
	},

	methods: {
		getData(num) {
			console.log('创建' + num + '万条数据');
			let indexNum = num * 10000;
			let index = [];
			let data1 = [];
			let data2 = [];
			for (var i = 0; i < indexNum; i++) {
				let n = i + Math.ceil(Math.random() * 10);
				let m = i + Math.ceil(Math.random() * 10);
				index.push(i + 1);
				data1.push(n);
				data2.push(m);
			}
			console.log('完成' + num + '万条数据');
			return { index, data1, data2 };
		},
		add(i) {
			console.log('i', i);
			let dataList = localStorage['bigData' + i];
			if (!dataList) {
				//没有数据将要创造数据
				dataList = this.getData(i);
			} else {
				dataList = JSON.parse(dataList);
			}
			
			let opt = {
				title: {
					text: i + '万条数据测试'
				},
				tooltip: {
					trigger: 'axis',
					position: function(pt) {
						return [pt[0], '10%'];
					}
				},
				animation: false,
				legend: {
					data: ['data1', 'data2']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				dataZoom: [
					{
						type: 'slider',
						start: 0,
						end: 5
					},
					{
						type: 'inside',
						start: 0,
						end: 5
					}
				],
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: dataList.index
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						smooth: true,
						symbol: 'none',
						sampling: 'average',
						name: 'data1',
						type: 'line',
						stack: 'Total',
						data: dataList.data1
					},
					{
						smooth: true,
						symbol: 'none',
						sampling: 'average',
						name: 'data2',
						type: 'line',
						stack: 'Total',
						data: dataList.data2
					}
				]
			};
			let str = '<div id="databox' + this.num + '" class="databox"></div>';
			$('#fromBox').append(str);
			this.$echarts.init(document.getElementById('databox' + this.num)).setOption(opt);

			this.num++;
		},
		nodata() {
			console.log('清空');
			$('#fromBox').html('');
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	height: 100%;
}
.databox {
	width: 100%;
	height: 400px;
}
</style>
